<template>
  <div id="container">
    <div id="left">
      <router-link to="/child0">child0</router-link> 
       <router-link to="/child1">child1</router-link> 
      </div>
    <div id="right">
      <router-view>
      </router-view>
      <div id="child0"></div>
      <div id="child1"></div>
    </div>
  </div>

  <!-- 子应用入口 -->
</template>

<script>
export default {
  name: "main01",
  data() {
    return {
      microAppNum: 2,
    };
  },
};
</script>
<style >
   * {
     margin: 0;
     padding: 0;
   }
  #container {
    height: 100vh;
    display: flex;
  }
  #left {
    background: lightblue;
    width: 100px;
    display: flex;
    flex-direction: column;
  }
  #right {
    background: lightcyan;
    flex: 1;
  }

</style>

